<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation动画</title>
    <style type="text/css">
        div{
            width: 60px;
            height: 60px;
            padding: 10px;
            margin-top: 10px;
            border-radius:40px;
            box-shadow: 0 0 20px rgba(204,39,52,0.8);
            background: #e54d26;
            animation: move 4s linear infinite;
            animation-direction: alternate;
        }
        @keyframes move {
            0%{transform:translate(0,0) }
            25%{transform:translate(100px,-50px) }
            50%{transform:translate(200px,0) }
            75%{transform:translate(100px,50px) }
            100%{transform:translate(0,0) }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>